import { Card } from 'antd';
import { connect } from 'dva';
import React, { PureComponent, useEffect, useState } from 'react';
import BasicService from './tabs/basicService';
import DataType from './tabs/dataType';
import styles from './style.less';
import RequestSequence from '../../abilitymanagement/components/RequestSequence';

const serviceLibrary: React.FC = (props: any) => {
  const { location, history } = props;
  const { query = { tab: 0 } } = location;
  const allTabs = [
    {
      tab: '基础服务',
      key: 'serverManager_basicService',
      component: () => <BasicService location={location} />,
      show: true,
      index: 0,
    },
    {
      tab: '数据类型',
      key: 'serverManager_dataType',
      component: () => <DataType location={location} />,
      show: true,
      index: 1,
    },
  ];
  const [current, setCurrent] = useState(allTabs[query.tab ?? 0].key);
  const changeTabKey = key => {
    history.replace({
      pathname: location.pathname,
      query: { tab: allTabs.find(t => t.key === key)?.index ?? 0 },
    });
    setCurrent(key);
  };

  useEffect(() => {
    setCurrent(allTabs[query.tab ?? 0].key);
  }, [query.tab]);
  const currentTab = allTabs.length
    ? (allTabs.find(e => e.key === current) ?? allTabs[0]).component()
    : null;
  return (
    <div className={styles.serviceLibrary}>
      <Card activeTabKey={current} onTabChange={changeTabKey} tabList={allTabs}>
        {currentTab}
      </Card>
      {/* 全局任务组件 */}
      <RequestSequence />
    </div>
  );
};
export default connect(({ vehicleInfoQuery }) => ({
  vehicleInfoQuery,
}))(serviceLibrary);
